<template>
    <div class="home">
        <div class="top-nav">
            <div class="top-title">
                <img class="logo" src="@assets/img/logo.png" alt="" />
                在线考试系统
            </div>
            <div class="info">
                <div class="time" v-if="examStore.getShowTime && !examStore.examFinished">
                    <div class="clock"></div>
                    <div class="time-title">剩余时间</div>
                    <div class="time-text">
                        <template v-if="!examStore.getExamStart">
                            {{ formateTime }}
                        </template>
                        <el-countdown class="count-time" v-else :value="countDownTime" format="HH：mm：ss" @finish="countFinishHandle" />
                    </div>
                </div>
                <el-dropdown @command="handleCommand">
                    <div class="userinfo el-dropdown-link">
                        <img class="avatar" src="@assets/img/avatar.png" alt="" />
                        {{ userStore.getUserinfo.realname }}
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- <el-dropdown-item command="changePwd">修改密码</el-dropdown-item> -->
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <router-view class="main"></router-view>
    </div>
</template>

<script setup>
import { useUserinfoStore } from '@/stores/user'
import { useExamStore } from '@/stores/exam'
import { computed, ref } from 'vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import { useRouter } from 'vue-router'

const userStore = useUserinfoStore()
const examStore = useExamStore()

const router = useRouter()

dayjs.extend(duration)

let formateTime = computed(() => {
    return dayjs(new Date('2018/03/13 00:00:00').getTime() + examStore.getReminder).format('HH：mm：ss')
})

let countDownTime = computed(() => {
    return dayjs(new Date().getTime() + examStore.getReminder)
})

function countFinishHandle() {
    examStore.examFinished = true
}

function handleCommand(command) {
    if (command === 'changePwd') {

    } else if(command === 'logout') {
        ElMessageBox.confirm('确定退出登录？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('examLocalData')
            sessionStorage.removeItem('currentExamIndex')
            sessionStorage.removeItem('user')
            sessionStorage.removeItem('userAnswer')
            router.push('login')
        }).catch(e => {})
    }
}
</script>

<style lang="less" scoped>
.home {
    position: relative;
    height: 100%;
    .top-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        padding: 0 30px;
        background-color: #397efd;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-title {
            display: flex;
            align-items: center;
            .logo {
                margin-right: 15px;
                width: 32px;
                height: 32px;
            }
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 3px;
        }
        .info {
            display: flex;
            .time {
                display: flex;
                align-items: center;
                margin-right: 30px;
                padding: 0 41px;
                width: 438px;
                height: 55px;
                border-radius: 35px;
                background-color: #3270e3;
                &-title {
                    margin-right: 30px;
                    font-size: 21px;
                }
                .clock {
                    margin-right: 30px;
                    width: 30px;
                    height: 30px;
                    .bg('clock');
                }
                .time-text {
                    font-size: 32px;
                    .count-time {
                        ::v-deep(span) {
                            font-size: 32px;
                            color: #fff;
                        }
                    }
                }
            }
            .userinfo {
                display: flex;
                align-items: center;
                font-size: 22px;
                color: #fff;
                .avatar {
                    margin-right: 15px;
                    width: 35px;
                    height: 35px;
                }
            }
        }
    }
    .main {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px;
        background-color: #f5f9ff;
        box-sizing: border-box;
    }
}
</style>
